<template>
  <div id="newProduct">
    <div class="card">
      <div class="card-header bg-info text-white">
        服务产品
        <span class="float-end" @click.stop="back()">返回</span>
      </div>
      <div class="card-body">
        <form>
          <div class="row mb-2">
            <label  class="col-2 col-form-label text-end"
              >产品类型</label
            >
            <div class="col-6">
              <select class="form-select" v-model.number="productType">
                <template v-for="info in productTypes">
                  <option :value="info.id">{{ info.name }}</option>
                </template>
              </select>
            </div>
          </div>

          <div class="row mb-2">
            <label for="inputEmail3" class="col-2 col-form-label text-end"
              >产品代码</label
            >
            <div class="col-6">
              <div class="input-group mb-2 mb-sm-0">
                  <span class="input-group-text">{{ prefix }}</span>
                <input type="text" class="form-control" v-model="code" />
              </div>
            </div>
          </div>

          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">产品名称</label>
            <div class="col-6">
              <input type="text" class="form-control" v-model="name" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">产品描述</label>
            <div class="col-6">
              <input type="text" class="form-control" v-model="remark" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">价格(元)</label>
            <div class="col-6">
              <input type="text" class="form-control" v-model.number="price" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">折扣(元)</label>
            <div class="col-6">
              <input
                type="text"
                class="form-control"
                v-model.number="discount"
              />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">成本</label>
            <div class="col-6">
              <input type="text" class="form-control" v-model.number="cost" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 col-form-label text-end">状态</label>
            <div class="col-6">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="0"
                  v-model.number="status"
                />
                <label class="form-check-label text-danger">停用</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="1"
                  v-model.number="status"
                />
                <label class="form-check-label text-success">启用</label>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="card-footer text-center">
        <button
          class="btn btn-primary ms-auto me-auto"
          type="button"
          @click.stop="create()"
        >
          保存
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { createProduct, getServiceProduct } from "@/api/product.js";

export default {
  data() {
    return {
      id: 0,
      productType: 0,
      prefix: "10",
      code: "",
      name: "",
      remark: "",
      price: 0,
      discount: 0,
      cost: 0,
      status: 0,
    };
  },
  computed: {
    productTypes() {
      return this.$store.state.productTypes;
    },
  },
  mounted: function () {
    const id0 = this.$route.query.id;
    if (id0 !== undefined) {
      const id1 = parseInt(id0);
      if (isNaN(id1) === false) {
        this.id = id1;
        this.getServiceProduct();
      }
    }
  },
  watch: {
    productType: function () {
      if (this.productType === 0) {
        this.prefix = "10";
      } else if (this.productType === 1) {
        this.prefix = "20";
      } else if (this.productType === 2) {
        this.prefix = "30";
      } else if (this.productType === 3) {
        this.prefix = "40";
      } else if (this.productType === 4) {
        this.prefix = "50";
      } else if (this.productType === 5) {
        this.prefix = "60";
      } else if (this.productType === 9) {
        this.prefix = "99";
      }
    },
  },
  destroyed() {},
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    create: function () {
      var params = {
        id: this.id,
        productType: this.productType,
        productCode: this.prefix + this.code,
        productName: this.name,
        productDesc: this.remark,
        price: this.price,
        discount: this.discount,
        cost: this.cost,
        status: this.status,
      };

      createProduct(
        params,
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            this.showErrMsg("OK");
            this.reset();
            this.$router.push("/products");
          } else {
            this.showErrMsg("ER: " + jsonResult.errmsg, "danger");
          }
        },
        () => {},
        () => {}
      );
    },
    reset: function () {
      this.id = 0;
      this.productType = 0;
      this.code = "";
      this.name = "";
      this.remark = "";
      this.price = 0;
      this.discount = 0;
      this.cost = 0;
    },
    getServiceProduct: function () {
      getServiceProduct(this.id, (o) => {
        this.productType = o.productType;
        this.code = o.productCode;
        this.name = o.productName;
        this.remark = o.productDesc;
        this.price = o.price;
        this.discount = o.discount;
        this.cost = o.cost;
        this.status = o.status;
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 通过 `vm` 访问组件实例
    });
  },
};
</script>
